<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style>
        .header{
            background-color: orange;
            height: 80px;
        }
        h1{
            margin: 0;
            padding:0;
            font-size:16px;
        }
        .container{
            display: flex;
        }
        .left{
            background-color:pink;
            height: 800px;
            flex: 2;
        }
        .main{
            background-color: #1b6d85;
            height: 800px;
            flex: 8;
         }
    </style>
</head>
<body>
<div id="app">
       <router-view></router-view>
      <div class="container">
          <router-view name="left"></router-view>
          <router-view name="main"></router-view>
      </div>
</div>
<script>
    var headerBox = {
        template:'<h1 class="header">header区域</h1>'
    };
    var leftBox = {
        template:'<h1 class="left">left区域</h1>'
    };
    var mainBox = {
        template:'<h1 class="main">main区域</h1>'
    };
    var router = new VueRouter({
        routes:[
            {path:'/',
             components:{
                'default': headerBox,
                'left': leftBox,
                'main': mainBox
             }
            }
            ]
    });
    var vm = new Vue({
        el:'#app',
        dataL:{},
        methods:{

        },
        router:router
    })
</script>

</body>
</html>